<template>
  <custom-container class="finance-report">
    <custom-container-header no-spacing>
      <el-form :model="filters" ref="form" :disabled="loading"
               inline size="medium"
               @submit.native.prevent="getAll"
               class="width-100"
      >
        <el-form-item label="查询时间:">
          <el-date-picker
            v-model="filters.date"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="{disabledDate: beforeToday.disabledDate}"
            value-format="timestamp"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </el-form-item>
        <!--<el-form-item>-->
          <!--<el-button type="primary" native-type="submit">查询</el-button>-->
        <!--</el-form-item>-->

        <el-form-item class="float-right">
          <custom-button-group v-model="time">
            <custom-button v-for="period in periods" :key="period.value" :label="period.value">
              {{period.title}}
            </custom-button>
          </custom-button-group>
        </el-form-item>
      </el-form>
    </custom-container-header>
    <custom-container-body>
      <el-table :data="tableData.list" :loading="loading" element-loading-text="加载中..." border border-radius
                :summary-method="getSummaries"
                :local-summary-method="getLocalSummaries"
                show-summary
                show-local-summary
                @sort-change="sortChange"
      >
        <el-table-column
          align="center"
          prop="date"
          label="日期">
        </el-table-column>
        <el-table-column
          align="center"
          prop="newUser"
          label="新注册会员">
        </el-table-column>
        <el-table-column
          align="center"
          label="活跃会员">
          <template slot-scope="{row}">
            {{row.actUser}}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="betAmount"
          label="总投注金额"
        >
          <template slot-scope="{row}">
            {{row.betAmount | currency}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="totalWin"
          label="公司总盈利"
        >
          <template slot-scope="{row}">
            <money-text :negate="true" :value="row.totalWin"></money-text>
          </template>
        </el-table-column>
      </el-table>
      <div class="el-pagination-container">
        <el-pagination
          bordered
          @size-change="gridSizeChange" @current-change="gridCurrentChange"
          :current-page="filters.page" :page-size="filters.size"
          :total="tableData.total">
        </el-pagination>
        <el-warning>红色负数代表会员盈利，绿色正数代表公司盈利</el-warning>
      </div>
    </custom-container-body>
  </custom-container>
</template>

<script>
  import {
    fundReportApi as getApi,
  } from '@/services/api/report';

  import {grid, pickerOption} from '@/build';


export default {

  name: "finance-report",

  mixins: [grid, pickerOption],

  data() {
    return {
      filters: {
        date: undefined,
        page: 1,
        size: 10,
      },
      periods: _.filter(consts.TIME_PERIOD, (period) => {
        return _.indexOf([consts.THIS_WEEK, consts.LAST_WEEK, consts.THIS_MONTH, consts.LAST_MONTH], period.value) !== -1;
      }),
      time: consts.THIS_WEEK,
      tableData: {
        list: [],
        total: 0,
      },
      statistic: [
        {
          index: 1,
          prop: 'tableData.sum.newUser',
        },
        {
          index: 3,
          prop: 'tableData.sum.betAmount',
          format: (value) => {
            return <div>{_.currency(value)}</div>;
          }
        },
        {
          index: 4,
          prop: 'tableData.sum.totalWin',
          format: (value) => {
            return <money-text negate={true} value={value}></money-text>;
          }
        },
        {
          index: 5,
          prop: 'tableData.sum.netWin',
          format: (value) => {
            return <money-text negate={true} value={value}></money-text>;
          }
        },
      ],
    };
  },

  watch: {
    'filters.date'() {
      this.gridSearch();
    }
  },

  methods: {
  },

  mounted() {
    this.bindGet(getApi, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      format: data => {
        data.list = _(data.list).map((info, date) => {
          return {
            date,
            ...info
          };
        }).orderBy(['date'], ['desc']).value();
        // data.total = _.size(data.list);
        return data;
      }
    });
  }
};
</script>

